<template>
    <Row class="statis">
        <Col span="11">
            <h2>任务完成度统计</h2>
            <TableList :columns="taskFinishColumn" :data="taskFinishStatis"></TableList>
        </Col>
        <Col span="11" offset="1">
            <h2>任务耗时统计</h2>
            <TableList 
                :columns="taskColumn" 
                :data="taskList" 
                :total="taskTotal"
                :page.sync="query.pageIndex" 
                :size.sync="query.pageSize"
                @queryFun="queryTaskList">
            </TableList>
        </Col>
    </Row>
</template>
<script>
    import {
        queryUserTaskStatistics,
        queryTaskList
    } from '../../api/task.js';
    import { formatSeconds } from '@/libs/utils';
    export default {
        name:'Statistics',
        props:['contentId'],
        data(){
            return {
                taskTotalCount:0,
                taskFinishStatis:[],
                taskFinishColumn:[
                    {
                        title:"任务状态",
                        key:'status',
                        filter:(status) => {
                            return status === 0 ? '未开始' : status === 1 ? '已完成' : '进行中'
                        },
                        setColor: (status) => {
                            return status === 0 ? 'var(--status-pre)' : status === 1 ? 'var(--status-yes)' : 'var(--status-ing)'
                        },
                    },
                    {
                        title:"数量",
                        key:'count'
                    },
                    {
                        title:"任务名称",
                        key:'names',
                        filter:(names) => names.join(','),
                        tooltip:true
                    },
                    {
                        title:"占比",
                        key:'per',
                        filter:(per,data) => {
                            return (data.count / this.taskTotalCount).toFixed(2)*100 + '%'
                        }
                    },
                ],
                query:{
                    pageIndex:1,
                    pageSize:10
                },
                taskList:[],
                taskTotal:0,
                taskColumn:[
                    {
                        title:"任务名称",
                        key:'taskName'
                    },
                    {
                        title:"任务状态",
                        key:'status',
                        filter:(status) => {
                            return status === 0 ? '未开始' : status === 1 ? '已完成' : '进行中'
                        },
                        setColor: (status) => {
                            return status === 0 ? 'var(--status-pre)' : status === 1 ? 'var(--status-yes)' : 'var(--status-ing)'
                        },
                    },
                    {
                        title:"任务实施人",
                        key:'userName'
                    },
                    {
                        title:"任务耗时",
                        key:'time',
                        filter:(time,data) => {
                            return data.status  === 1 ? formatSeconds((new Date(data.finishTime).getTime() - new Date(data.realTime).getTime()) / 1000) : '-'
                        }
                    }
                ]
            }
        },
        mounted(){
            this.queryUserTaskStatistics();
            this.queryTaskList();
        },
        methods:{
            queryUserTaskStatistics(){
                queryUserTaskStatistics(this.contentId).then(({code,data,messgae}) => {
                    if(code === 1){
                        this.taskFinishStatis = data.taskStatisticsVOS;
                        this.taskTotalCount = data.totalCount;
                    }
                })
            },
            queryTaskList(){
                queryTaskList(this.contentId,this.query).then(({code,data,messgae}) => {
                    if(code === 1){
                        this.taskList = data.items;
                        this.taskTotal = data.total;
                    }
                })
            },
        }
    }
</script>
<style>
    .statis h2 {
        margin: 0 0 20px 0;
    }
</style>